﻿<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			.wrapper {
				width: 1000px;
				height: 475px;
				margin: 0 auto;
				margin-top: 100px;
			}
			
			.tab {
				border: 1px solid #ddd;
				border-bottom: 0;
				height: 36px;
				width: 320px;
			}
			
			.tab li {
				position: relative;
				float: left;
				width: 80px;
				height: 34px;
				line-height: 34px;
				text-align: center;
				cursor: pointer;
				border-top: 4px solid #fff;
			}
			
			.tab span {
				position: absolute;
				right: 0;
				top: 10px;
				background: #ddd;
				width: 1px;
				height: 14px;
				overflow: hidden;
			}
			
			.products {
				width: 1002px;
				border: 1px solid #ddd;
				height: 476px;
			}
			
			.products .main {
				float: left;
				display: none;
			}
			
			.products .main.selected {
				display: block;
			}
			
			.tab li.active {
				border-color: red;
				border-bottom: 0;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<script>
			//有些事现在不做,以后就没有机会了
			//有些事现在不做,是为了以后做的更好
		</script>
		<script>
			//页面加载的事件
			$(function(){
				
				$("ul>li").mouseenter(function(){
					$(this).addClass("active").siblings('li').removeClass("active")
					var index =  $(this).index()
					$(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected")
				})
				
			})
			
			
		</script>

	</head>

	<body>
		<div class="wrapper">
			<ul class="tab">
				<li class="tab-item active">国际大牌<span>◆</span></li>
				<li class="tab-item">国妆名牌<span>◆</span></li>
				<li class="tab-item">清洁用品<span>◆</span></li>
				<li class="tab-item">男士精品</li>
			</ul>
			<div class="products">
				<div class="main selected">
					<a href="###"><img src="img/guojidapai.jpg" alt="" /></a>
				</div>
				<div class="main">
					<a href="###"><img src="img/guozhuangmingpin.jpg" alt="" /></a>
				</div>
				<div class="main">
					<a href="###"><img src="img/qingjieyongpin.jpg" alt="" /></a>
				</div>
				<div class="main">
					<a href="###"><img src="img/nanshijingpin.jpg" alt="" /></a>
				</div>
			</div>
		</div>

	</body>

</html>